<template>
  <view class="page">
    <Navbar title=" " color="#24DE73" :auto-back="false">
      <view class="navbar" slot="left">卫日亚</view>
    </Navbar>
    <view class="body-top">
      <image class="car" :src="webSrc('/profile/static/icon-car.png')" />
      <image class="line" :src="webSrc('/profile/static/green-line.png')" />
      <view class="power"> 开门 </view>
      <view class="b1"></view>
      <view class="b1 b2"></view>
    </view>
    <view class="body-bottom">
      <Notice speed="7" :content="notice.details" @click="handleNotice" />
      <view class="body-btn bg-green f f-ac f-jc" @click="handleTemp">
        <view class="btn-left">
          <image
            :src="webSrc('/profile/static/icon-charge.png')"
            style="height: 90rpx; width: 80rpx"
          />
        </view>
        <view class="btn-right">临时开门</view>
      </view>
    </view>
    <Popup
      v-model="popupShow"
      :text="popupInfo.text"
      @close="closePopup"
      @confirm="confirmPopup"
    />
  </view>
</template>

<script>
import { getNotice } from "@/request/common.js";
import { postDepositRecord } from "@/request/payApi.js";
import { getUserInfo } from "@/request/bindApi.js";
export default {
  data() {
    return {
      notice: {}, // 公告
      popupShow: false, // 弹窗
      popupInfo: {
        text: "", // 弹窗内容
        type: "", // 类型
      },
    };
  },
  onShow() {
    this.refreshUserInfo();
    this.getNoticeData();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refreshUserInfo();
    this.getNoticeData();
  },
  methods: {
    // 获取公告
    getNoticeData() {
      getNotice({ state: 1, pageSize: 1, pageNum: 1 })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows.length > 0) {
              this.notice = res.rows[0];
            }
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 刷新用户信息
    refreshUserInfo() {
      getUserInfo()
        .then((res) => {
          if (res.code === 200) {
            uni.setStorageSync("USER_INFO", JSON.stringify(res.data));
            this.userInfo = res.data;
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
        });
    },
    // 查看公告详情
    handleNotice() {
      uni.navigateTo({
        url: `/pages/my/myNoticeDetail?data=${JSON.stringify(this.notice)}`,
      });
    },
    // 判断字符串是否为序列化后的对象
    isSerialized(str) {
      try {
        JSON.parse(str);
        return true;
      } catch (e) {
        return false;
      }
    },
    // 临时开门
    handleTemp() {
      this.$author(() => {
      if (this.userInfo.status != 1) {
        this.popupInfo = {
            text: "当前账号不可用",
            type: "toast",
          };
          this.popupShow = true;
          return;
      }
        uni.scanCode({
          onlyFromCamera: false, // 是否只能从相机扫码
          scanType: ["qrCode"],
          success: (code) => {
            let obj = {};
            // 判断字符串是否为序列化后的对象
            if (!this.isSerialized(code.result)) {
              this.popupInfo = {
                text: "请扫描正确的二维码",
                type: "toast",
              };
              this.popupShow = true;
              return;
            }
            obj = JSON.parse(code.result);
            // 判断字符串包含type和id字段
            if (!obj.hasOwnProperty("type") || !obj.hasOwnProperty("id")) {
              this.popupInfo = {
                text: "请扫描正确的二维码",
                type: "toast",
              };
              this.popupShow = true;
              return;
            }
            postDepositRecord(obj).then((res) => {
              if (res.code == 200) {
                this.popupInfo = {
                  text: "“门已开启”",
                  type: "door",
                };
              } else if (res.code == 201) {
                this.popupInfo = {
                  text: res.msg,
                  type: "recharge",
                };
              } else {
                this.popupInfo = {
                  text: res.msg || "服务器错误",
                  type: "door",
                };
              }
              this.popupShow = true;
            });
          },
          fail: (e) => {
            if (e.errMsg.includes("cancel")) return;
            this.popupInfo = {
              text: "未识别到二维码",
              type: "toast",
            };
            this.popupShow = true;
          },
        });
      });
    },
    // 关闭弹窗
    closePopup() {
      this.popupShow = false;
    },
    // 确认弹窗
    confirmPopup() {
      if (this.popupInfo.type == "recharge") {
        uni.navigateTo({ url: "/pages/pay/cashier" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  .navbar {
    color: #24de73;
    font-family: "FZZongYi-M05S";
    font-size: 32rpx;
    letter-spacing: 4rpx;
  }
  .body-top {
    position: fixed;
    bottom: 53%;
    height: 400rpx;
    width: 100%;
    .power {
      position: absolute;
      width: 100%;
      bottom: -14rpx;
      font-size: 36rpx;
      color: #25ca6a;
      text-align: center;
    }
    .car {
      position: absolute;
      top: -50rpx;
      left: calc(50% - 290rpx);
      width: 500rpx;
      height: 332rpx;
      z-index: 9;
    }
    .line {
      position: absolute;
      bottom: 0;
      left: 5%;
      right: 5%;
      width: 90%;
      height: 62rpx;
    }
    .b1 {
      position: absolute;
      border-radius: 50%;
      transform: rotateX(75deg);
      animation: open 10s infinite;
    }
    .b2 {
      animation-delay: 3s;
    }
  }
  @keyframes open {
    0% {
      width: 50rpx;
      height: 50rpx;
      left: calc(50% - 50rpx);
      top: 250rpx;
      opacity: 0.2;
      border-bottom: 2rpx solid #24de73;
    }
    50% {
      opacity: 1;
    }
    100% {
      width: 500rpx;
      height: 500rpx;
      left: calc(50% - 275rpx);
      top: 30rpx;
      opacity: 0;
      border-bottom: 20rpx solid rgba(36, 222, 114, 0.5);
    }
  }
  .body-bottom {
    width: 100%;
    height: 508rpx;
    padding: 60rpx 40rpx;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 8;
    box-sizing: border-box;
    background-color: #21212a;
    border-radius: 40rpx 40rpx 0 0;
    overflow-y: auto;
    position: fixed;
    .body-btn {
      height: 180rpx;
      margin-top: 80rpx;
      border: 1rpx solid #24de73;
      border-radius: 30rpx;
      font-family: "FZZongYi-M05S";
      &:active {
        background-color: #25ca6a;
      }
      .btn-left {
        padding-right: 40rpx;
      }
      .btn-right {
        color: #fff;
        font-size: 68rpx;
        letter-spacing: 8rpx;
      }
    }
  }
}
</style>
